<template>
	
     <u-popup  :show="showShare" :round="25" >
		     <view class="flex-col section_1" :show="showShare">
		       <view class="flex-col section_2">
		         <view class="justify-between group">
		           <view class="flex-row group_1">
		             <image
		               :src="imgUrl+'16557827022242805495.png'"
		               class="image image_1"
		             />
		             <text class="text">分享到</text>
		             <image
		               :src="imgUrl+'16557827022700765865.png'"
		               class="image image_2"
		             />
		           </view>
		           <image @click="showShare=false"
		             :src="imgUrl+'16557827017666502206.png'"
		             class="image_3"
		           />
		         </view>
		         <view class="flex-row equal-division">
		           <view class="flex-col items-center equal-division-item" @click="shareFriend">
		             <image
		               :src="imgUrl+'16557827016979514580.png'"
		               class="image_4"
		             />
		             <text class="text_1" >微信好友</text>
		           </view>
		           <view class="flex-col items-center equal-division-item" @click="wechatMoments">
		             <image
		               :src="imgUrl+'16557827017029473384.png'"
		               class="image_4"
		             />
		             <text class="text_1" >朋友圈</text>
		           </view>
		         </view>
		       </view>
		     </view>
	</u-popup>
	
</template>
<script>
/**
 * 分享弹窗
 * @property {Boolean} value = showModal - v-model控制显隐
 * @property {String} posterType - 海报类别
 * @property {Object} posterInfo - 海报数据
 */
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
import Auth from '@/shop/permission/index.js';
export default {
	name: 'shopShare',
	components: {},
	data() {
		return {
			showShareGuide: false, //H5的指引。
			showPoster: false, //海报弹窗
			platform: this.$platform.get(),
			posterImage: '',
			canvasParams: {},
			imgUrl:this.$IMG_URL,
		};
	},
	props: {
		posterType: {
			type: String,
			default: ''
		},
		posterInfo: {
			type: Object,
			default: () => {}
		},
		value: {}
	},
	computed: {
		...mapGetters([ 'userInfo', 'isLogin', 'shareInfo']),
		showShare: {
			get() {
				return this.value;
			},
			set(val) {
				if (!this.showPoster) {
					val ? uni.hideTabBar() : uni.showTabBar();
				}
				this.$emit('input', val);
			}
		}
	},

	created() {
		uni.$on('ON_WX_SHARE', () => {
			this.showShare = false;
		});
	},
	methods: {
	
		// 分享好友
		shareFriend() {
			let that = this;
			// #ifdef APP-PLUS
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 0,
				href: that.shareInfo.path,
				title: that.shareInfo.title,
				summary: that.shareInfo.title,
				// image: that.shareInfo.image,
			
				image: that.shareInfo.image,
				success: res => {
					console.log('success:' + JSON.stringify(res));
					this.showShare = false;
				},
				fail: err => {
					console.log('fail:' + JSON.stringify(err));
				}
			});
			// #endif
			// #ifdef H5
			this.showShare = false;
			this.showShareGuide = true;
			// #endif
		},
       wechatMoments(){
		   uni.share({
		    provider: "weixin",
		 	scene: "WXSceneTimeline",
		 	type: 0,
		 	href: this.shareInfo.path,
		 	title: this.shareInfo.title,
		 	summary: this.shareInfo.title,
		 	imageUrl: this.shareInfo.image,
		   	success: function (res) {
		   		console.log("success:" + JSON.stringify(res));
		   	},
		   	fail: function (err) {
		   		console.log("fail:" + JSON.stringify(err));
		   	}
		   });
	   }
	
	
	
	}
};
</script>

<style lang="scss">
.equal-division-item {
    flex: 1 1 224rpx;
    padding: 10rpx 0;
    width: 224rpx;
  }
  .image {
    flex-shrink: 0;
    width: 28rpx;
    height: 10rpx;
  }
  .image_4 {
    width: 80rpx;
    height: 80rpx;
  }
  .text_1 {
    margin-top: 13rpx;
    color: #333333;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
 .section_1 {
    border-radius: 60rpx;
    background-color: #00000080;
  }
  .section_2 {
    padding: 37rpx 32rpx 64rpx 150rpx;
    background-color: #ffffff;
    border-radius: 40rpx 40rpx 0px 0px;
  }
  .group {
    padding-left: 129rpx;
  }
  .equal-division {
    margin-top: 33rpx;
    align-self: flex-start;
  }
  .group_1 {
    margin-bottom: 7rpx;
  }
  .image_3 {
    margin-top: 5rpx;
    width: 40rpx;
    height: 40rpx;
  }
  .image_1 {
    margin-top: 21rpx;
  }
  .text {
    margin-left: 20rpx;
    color: #333333;
    font-size: 32rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 38rpx;
  }
  .image_2 {
    margin-left: 20rpx;
    margin-top: 21rpx;
  }
</style>
